<template>
    <button @click="toggleComponent">卸载组件</button>
    <MyComponent v-if="showComponent"></MyComponent>
</template>
<script>
import { ref,onBeforeUnmount, onUnmounted } from 'vue';

const MyComponent = {
    setup() {
        onBeforeUnmount(() => {
            console.log('MyComponent即将卸载')
        })

        onUnmounted(() => {
            console.log('MyComponent已经卸载')
        })
    }
}
export default {
    components: {
        MyComponent
    },
    setup() {
        const showComponent = ref(true)
        function toggleComponent() {
            showComponent.value = !showComponent
        }
        return {
            showComponent,
            toggleComponent
        }
    }
}
</script>